<template>
    <div class="leetcode-layout">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="nav-left">
                <el-button icon="el-icon-back" @click="goBack">返回题目列表</el-button>
                <el-divider direction="vertical"></el-divider>
                <span class="problem-title">{{ problem.id }}. {{ problem.name }}</span>
            </div>
            <div class="nav-right">
                <el-button-group>
                    <el-button icon="el-icon-arrow-left" size="small">上一题</el-button>
                    <el-button size="small">随机一题</el-button>
                    <el-button icon="el-icon-arrow-right" size="small">下一题</el-button>
                </el-button-group>
            </div>
        </div>

        <div class="main-content">
            <!-- 左侧内容区 -->
            <div class="left-container">
                <el-tabs v-model="activeTab" type="card">
                    <el-tab-pane label="题目描述" name="description">
                        <div class="description-container">
                            <div class="problem-stats">
                                <el-tag :type="getDifficultyType">{{ problem.difficulty }}</el-tag>
                                <span class="stat-item">通过率：{{ problem.passingRate }}</span>
                            </div>

                            <div class="description-content">
                                <div class="description-text">{{ problem.description }}</div>

                                <div class="examples">
                                    <div v-for="(example, index) in problem.examples" :key="index" class="example-item">
                                        <h4>示例 {{ index + 1 }}：</h4>
                                        <div class="example-box">
                                            <div><strong>输入：</strong>{{ example.input }}</div>
                                            <div><strong>输出：</strong>{{ example.output }}</div>
                                            <div v-if="example.explanation"><strong>解释：</strong>{{ example.explanation
                                                }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="constraints">
                                    <h4>提示：</h4>
                                    <ul>
                                        <li v-for="(constraint, index) in problem.constraints" :key="index">
                                            {{ constraint }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="题解" name="solutions">
                        <div class="solutions-container">
                            <div class="solutions-header">
                                <el-input placeholder="搜索题解" prefix-icon="el-icon-search"
                                    v-model="solutionSearch"></el-input>
                                <el-button type="primary">写题解</el-button>
                            </div>
                            <div class="solutions-list">
                                <el-card v-for="solution in solutions" :key="solution.id" class="solution-card">
                                    <div class="solution-header">
                                        <el-avatar :size="40" :src="solution.authorAvatar"></el-avatar>
                                        <div class="solution-info">
                                            <div class="solution-title">{{ solution.title }}</div>
                                            <div class="solution-meta">
                                                <span>{{ solution.author }}</span>
                                                <span>{{ solution.date }}</span>
                                                <span>{{ solution.likes }}赞同</span>
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="提交记录" name="submissions">
                        <el-table :data="submissionHistory" style="width: 100%">
                            <el-table-column prop="date" label="提交时间" width="180"></el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status === '通过' ? 'success' : 'danger'">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="runtime" label="执行用时" width="120"></el-table-column>
                            <el-table-column prop="memory" label="内存消耗" width="120"></el-table-column>
                            <el-table-column prop="language" label="语言"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <!-- 右侧代码编辑器 -->
            <div class="right-container">
                <div class="editor-header">
                    <el-select v-model="selectedLanguage" size="small">
                        <el-option v-for="lang in languages" :key="lang.value" :label="lang.label" :value="lang.value">
                        </el-option>
                    </el-select>
                </div>

                <div class="code-editor">
                    <textarea placeholder="请输入代码"></textarea>
                </div>

                <div class="test-panel">
                    <div class="panel-header" @click="toggleTestPanel">
                        <div class="left-section">
                            <i class="el-icon-check"></i>
                            测试用例
                            <i class="el-icon-arrow-right" :class="{ 'is-active': showTestPanel }"></i>
                        </div>
                        <div class="right-section">
                            <i class="el-icon-full-screen"></i>
                            <i class="el-icon-arrow-up" :class="{ 'is-active': showTestPanel }"></i>
                        </div>
                    </div>

                    <div class="panel-content" v-show="showTestPanel">
                        <div class="test-cases-tabs">
                            <span v-for="n in 3" :key="n" :class="['case-tab', { active: currentCase === n }]"
                                @click="currentCase = n">
                                Case {{ n }}
                            </span>
                            <span class="case-tab add-case">
                                <i class="el-icon-plus"></i>
                            </span>
                        </div>
                        <div class="test-case-input">
                            <div class="input-label">s =</div>
                            <div class="input-content">
                                <el-input type="textarea" v-model="testCases[currentCase - 1]" :rows="3"
                                    resize="none"></el-input>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="editor-footer">
                    <el-button type="primary" @click="runCode">执行代码</el-button>
                    <el-button type="success" @click="submitCode">提交</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>


export default {
    components: {
    },
    name: 'StudyDetail',
    data() {
        return {
            activeTab: 'description',
            selectedLanguage: 'javascript',
            showTestPanel: true,
            currentCase: 1,
            solutionSearch: '',
            code: '',
            languages: [
                { label: 'JavaScript', value: 'javascript' },
                { label: 'Python3', value: 'python' },
                { label: 'Java', value: 'java' },
                { label: 'C++', value: 'cpp' }
            ],
            problem: {
                id: 3,
                name: '无重复字符的最长子串',
                difficulty: '中等',
                passingRate: '38.9%',
                description: '给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。',
                examples: [
                    {
                        input: 's = "abcabcbb"',
                        output: '3',
                        explanation: '因为无重复字符的最长子串是 "abc"，所以其长度为 3。'
                    }
                ],
                constraints: [
                    '0 <= s.length <= 5 * 104',
                    's 由英文字母、数字、符号和空格组成'
                ]
            },
            testCases: [
                '"abcabcbb"',
                '"bbbbb"',
                '"pwwkew"'
            ],
            solutions: [
                {
                    id: 1,
                    title: '滑动窗口解法详解',
                    author: 'leetcode_master',
                    authorAvatar: 'https://example.com/avatar1.jpg',
                    date: '2024-03-20',
                    likes: 1234
                }
            ],
            submissionHistory: [
                {
                    date: '2024-03-20 10:20:30',
                    status: '通过',
                    runtime: '76 ms',
                    memory: '39.5 MB',
                    language: 'JavaScript'
                }
            ]
        }
    },
    computed: {
        getDifficultyType() {
            const types = {
                '简单': 'success',
                '中等': 'warning',
                '困难': 'danger'
            }
            return types[this.problem.difficulty] || 'info'
        }
    },
    methods: {
        goBack() {
            this.$router.push('/study')
        },
        toggleTestPanel() {
            this.showTestPanel = !this.showTestPanel
        },
        async runCode() {
            try {
                this.$message.success('代码执行成功')
            } catch (error) {
                this.$message.error('代码执行失败')
            }
        },
        async submitCode() {
            try {
                this.$message.success('代码提交成功')
            } catch (error) {
                this.$message.error('代码提交失败')
            }
        }
    },
    created() {
        const problemId = this.$route.params.id
        // 获取题目详情
        // this.fetchProblemDetail(problemId)
    }
}
</script>

<style scoped>
.leetcode-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-nav {
    height: 50px;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: #fff;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.problem-title {
    font-size: 16px;
    font-weight: 500;
}

.main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.left-container {
    width: 50%;
    padding: 20px;
    overflow-y: auto;
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.right-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.problem-stats {
    margin-bottom: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.stat-item {
    color: #666;
}

.description-content {
    line-height: 1.6;
}

.example-box {
    background: #f7f9fc;
    padding: 16px;
    border-radius: 4px;
    margin: 12px 0;
    font-family: monospace;
}

.editor-header {
    padding: 12px;
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.code-editor {
    flex: 1;
    position: relative;
}

.code-editor textarea {
    width: 100%;
    height: 100%;
    padding: 16px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    border: none;
    resize: none;
    background: #1e1e1e;
    color: #d4d4d4;
}

.test-panel {
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 12px;
    border-radius: 4px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f5f7fa;
    cursor: pointer;
}

.left-section,
.right-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-content {
    padding: 12px;
    border-top: 1px solid #e4e7ed;
}

.test-cases-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.case-tab {
    padding: 4px 12px;
    background: #f5f7fa;
    border-radius: 4px;
    cursor: pointer;
}

.case-tab.active {
    background: #ecf5ff;
    color: #409eff;
}

.test-case-input {
    display: flex;
    gap: 8px;
}

.input-label {
    padding-top: 8px;
}

.input-content {
    flex: 1;
}

.editor-footer {
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #e4e7ed;
}

.solutions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.solution-card {
    margin-bottom: 16px;
}

.solution-header {
    display: flex;
    gap: 12px;
}

.solution-info {
    flex: 1;
}

.solution-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.solution-meta {
    color: #666;
    font-size: 12px;
    display: flex;
    gap: 12px;
}

.is-active {
    transform: rotate(90deg);
}
</style>